<template>
  <div class="home">
    <div class="headerbox">
      <p>爱车出险没车开？四维代步车伴您回家！</p>
      <p>专人上门接送车，押金全免，帮您省时省心！</p>
    </div>
    <div class="bottombox">
      <div>
        <router-link  to="/apply">
          <button class="applyforbtn">申请免费代步车</button>
        </router-link>
        <p>服务热线<span><a :href="'tel:400-8050-126'">400-8050-126</a></span></p>
      </div>
    </div>
     
      <baidu-map
        class="map"
        :center="center" 
        :zoom="zoom"
        :dragging="true" 
        
        :scroll-wheel-zoom="true"
        @ready="handler"
        @click="getClickInfo"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom"
      >
        
        <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation> -->
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :showAddressBar="true"
          :autoLocation="true"
        ></bm-geolocation>
        <bm-marker :position="{lng:center.lng, lat: center.lat}"></bm-marker>
      </baidu-map>

      <div class="loadingbox" v-show="isloading">
          <van-loading class="loadingfont" type="spinner" color="#AD2F2F" />
      </div>
      
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    // HelloWorld
    
  },
  data(){
    return {
				// 省略一部分
				baidumapSwitch:false,
        center: { lng: 0, lat: 0 },
        zoom: 16,
        isloading:true,
        // location: "深圳市",
        keyword: "请输入搜索关键词",
        appid:'wx34cf35d5042bb226',//测试
        code:'',
			}
  },
  created(){
    //如果支持,获取位置信息
      if (navigator.geolocation) {
        //获取当前地理信息
        window.navigator.geolocation.getCurrentPosition(success, error);
        //获取地理信息成功时的回调函数
        function success(position) {
          // alert("成功获取您的地理信息");

          //获取经度维度信息
          //coords属性
          var latitude = position.coords.latitude;
          var longitude = position.coords.longitude;
              this.center.lng = longitude;
              this.center.lat = latitude;
        }

        //获取地理信息失败时的回调函数
        function error(msg) {
          // alert("获取您的地理信息失败");
        }
      }
      let unionid = sessionStorage.getItem('getunionid')
      let userinfos = sessionStorage.getItem('userinfos')
      

      if(unionid&&userinfos){
        this.isloading = false
        return true
      }else{
        this.getCode()
      }
  },
  methods:{
    
    handler({ BMap, map }) {
      console.log(BMap, map )
      let _this = this;  // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
          console.log(r);
          _this.center = {lng: r.longitude, lat: r.latitude};   // 设置center属性值
          _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};   // 自定义覆盖物
          _this.initLocation = true; 
          console.log('center:', _this.center)  // 如果这里直接使用this是不行的
        },{enableHighAccuracy: true})
    },
    //点击获取到当前经纬度
    getClickInfo(e) {
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    },
    //双向绑定经纬度以及缩放尺寸
    syncCenterAndZoom(e) {
      const { lng, lat } = e.target.getCenter();
      this.center.lng = lng;
      this.center.lat = lat;
      // this.zoom = e.target.getZoom();
    },
    //经纬度同步
    baidumap(){
    this.baiduDevicelocationx = this.center.lng
    this.baiduDevicelocationy = this.center.lat
    },
    onSuccess(position){
      console.log('纬度: '          + position.coords.latitude          + '\n' +
      '经度: '         + position.coords.longitude         + '\n' +
      '海拔: '          + position.coords.altitude          + '\n' +
      '水平精度: '          + position.coords.accuracy          + '\n' +
      '垂直精度: ' + position.coords.altitudeAccura)
    },
    onError(error) {
    switch(error.code){
      case error.PERMISSION_DENIED:
      // alert("您拒绝对获取地理位置的请求");
      break;
      case error.POSITION_UNAVAILABLE:
      // alert("位置信息是不可用的");
      break;
      case error.TIMEOUT:
      // alert("请求您的地理位置超时");
      break;
      case error.UNKNOWN_ERROR:
      // alert("未知错误");
      break;
    }
  },
  getCode(){
      if(window.location.href.indexOf("code")>0){
        this.code = window.location.search.split("=")[1].split("&")[0];
        let params={
          code:this.code
        }
        this.$post("/gzh/object/public/index.php/wechat/info/users", params).then(res => {
          if (res.code == 200) {
            if(sessionStorage.getItem('getunionid') != res.data.unionid){
              sessionStorage.removeItem('userinfos')
            }
            this.getRegisterMap(res.data.unionid)
            console.log(res.data.unionid)
            sessionStorage.setItem('isuserinfo',JSON.stringify(res.data))
           sessionStorage.setItem('getunionid',res.data.unionid)
          }
        });
      }else{
        
        // this.isComplete = true;
        // https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx76b962e6ee83a9e1 &redirect_uri=https%3A%2F%2Ftestcarmng.sshhui.com%2Fgzh%2Fobject%2Fpublic%2Findex.php%2Fwechat%2Finfo%2Fusers&response_type=code&scope=&state=2b848a8cc886d253d21a77c43cd50aae#wechat_redirect
        window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+this.appid+"&redirect_uri="+window.location.origin+window.location.pathname+"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
      }
    },
    getRegisterMap(unionid){
      let _this=this
      let params = {
        unionid:unionid
      }
      this.$post('/registuser/queryMap',params).then( res => {
        // console.log(res)
        _this.isloading = false
        if(res.code="200"){
          sessionStorage.setItem('userinfos',JSON.stringify(res.data))
        }else{
          // this.$router.push("/login");
        }
        // this.$toast(res.msg)
      })
    },
  
  },
   mounted() {
     if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(this.onSuccess , this.onError);
    }else{
      alert("您的浏览器不支持使用页面获取地理位置服务");
    }
    
  }
}
</script>
<style lang="scss" scoped>
.loadingbox {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,0.5);
    z-index: 10;
   
}
.map{
    width: 100%;
    height: calc(100% - 290px);
    position: absolute;
    left: 0;
    top: 120px;
 
} 

.BMap_cpyCtrl {
    display: none!important;
}
.anchorBL {
    display: none!important;
}
.home{
  width:100%;
  height: 100vh;
  text-align: center;
  box-sizing: border-box;
}
.headerbox{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  font-family:Source Han Sans CN;
  height: 120px;
  font-weight:400;
  color: #333333;
  background:rgba(255,255,255,1);
  box-shadow:0px 2px 10px 0px rgba(152,152,152,0.2);
  border-radius: 0 0 20px 20px;
  overflow:hidden;
  font-size: 14px;
  padding: 20px 0;
  box-sizing: border-box;
  p{
    line-height: 30px;
  }
}
.bottombox{
  width:100%;
  position: absolute;
  bottom: 60px;
  left: 0;
  z-index: 2;
  height: 130px;
  background:rgba(255,255,255,1);
  box-shadow:0px -2px 10px 0px rgba(152,152,152,0.2);
  border-radius:20px 20px 0 0;
  padding:30px 0;
  font-size: 14px;
  box-sizing: border-box;
  p{
    line-height: 35px;
    a{
      color: #AD2F2F;
      margin-left: 15px;
    }
  }
}
.applyforbtn{
    background: #fff;
    border: 1px solid #AD2F2F;
    width: 200px;
    color: #AD2F2F;
    font-size: 14px;
    padding: 10px 20px;
  }
  
</style>
